<template>
  <div>
    city
    <button v-for="item of hots" :key="item" @click="handleCity(item)">
      {{ item }}
    </button>
  </div>
</template>

<script>
import axios from "axios";
import axiosJsonp from "axios-jsonp";
export default {
  data() {
    return {
      hots: ["武汉", "广州", "上海"],
    };
  },
  methods: {
    handleCity(val) {
      localStorage.setItem("city", val);
      this.$router.back();
    },
  },
  mounted() {
    // axios({
    //   url: "https://apis.map.qq.com/ws/location/v1/ip?key=2KEBZ-FM4K3-UVE3W-YN4SD-3OT7K-LHFTI&output=jsonp",
    //   adapter: axiosJsonp,
    // }).then((res) => {
    //   console.log(res);
    // });
    axios({
      url: "https://apis.map.qq.com/ws/location/v1/ip",
      adapter: axiosJsonp,
      params: {
        key: "2KEBZ-FM4K3-UVE3W-YN4SD-3OT7K-LHFTI",
        output: "jsonp",
      },
    }).then((res) => {
      console.log(res);
    });

    // axios({
    //   url: "http://47.108.197.28:3000/top/playlist",
    //   params: {
    //     limit: 20,
    //   },
    // }).then((res) => {
    //   console.log(res);
    // });
  },
};
</script>

<style>
</style>